<template>
  <div class="personalCenter-container">
    <el-tabs :tab-position="tabPosition">

      <el-tab-pane label="基本设置">
        <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
          <el-form-item label="旧密码" prop="oldPwd">

            <el-input :type="flag?'text':'password'" v-model="ruleForm.oldPwd" autocomplete="off"  style="width: 300px">
              <i slot="suffix" :title="flag?'隐藏密码':'显示密码'" @click="flag=!flag" style="cursor:pointer;"
                 :class="flag?'el-icon-minus':'el-icon-view'"></i>
            </el-input>
          </el-form-item>
          <el-form-item label="新密码" prop="newPwd">
            <el-input :type="flags?'text':'password'" v-model="ruleForm.newPwd" autocomplete="off" style="width: 300px">
              <i slot="suffix" :title="flag?'隐藏密码':'显示密码'"  @click="flags=!flags" style="cursor:pointer;"
                 :class="flags?'el-icon-minus':'el-icon-view'"></i>
            </el-input>

          </el-form-item>

          <el-form-item>
            <el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
            <el-button @click="resetForm('ruleForm')">重置</el-button>
          </el-form-item>
        </el-form>
      </el-tab-pane>

    </el-tabs>
  </div>
</template>

<script>
    import { reseivepass } from "@/api/personalcenter"
  export default {
    name: "PersonalCenter",
    data() {
        var newPwd = (rule, value, callback) => {
                if (value === '') {
                    callback(new Error('请输入新密码'));
                } else {

                    callback();
                }
            };
        var oldPwd = (rule, value, callback) => {
            if (value === '') {
                callback(new Error('请再次输入密码'));

            }else {
                callback();
            }

        };
        return {
          tabPosition: "left",

          ruleForm: {
              newPwd: '',
              oldPwd: ''
          },
            flag: false,
            flags:false,

          rules: {
              newPwd: [
                  { validator: newPwd, trigger: 'blur' }
              ],
              oldPwd: [
                  { validator: oldPwd, trigger: 'blur' }
              ],

          },

      };
    },
    created() {},
    methods: {

        submitForm(formName) {
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    reseivepass(this.ruleForm).then(res =>{
                        console.log(res)
                        if(res.code==200){
                            this.$message({
                                message: "密码已修改",
                                type: 'success'
                            })
                        }else {
                            return false
                        }


                    })
                } else {

                    return false;
                }
            });
        },
        resetForm(formName) {
            this.$refs[formName].resetFields();
        }



    },
  };
</script>
